<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue test</title>
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <label for="number">只能输入数字</label>

    <div>
      <input type="text" v-number-only="{'ctx':this, 'validate': ()=>{}, 'expression': 'str'}" :data-value="str" name="number"
      />
    </div>

    <p>{{ str }}</p>

    <!-- <label for="banckAccount">银行账号</label> -->

    <button @click="method3">当前useranget</button>
    <p>{{userAgent}}</p>
  </div>
  <script type="text/javascript">
    let vm = new Vue({
      el: "#app",
      data: {
        str: "",
        userAgent: ""
      },
      methods: {
        method3() {
          this.userAgent = window.userAgent
        }
      },
      directives: {
        numberOnly: {
          bind: function (el, binding, vnode) {
            el.handler = function (event) {
              // console.log(event, "event")

              // console.log(el, "el")
              console.log(binding, "binding")
              // console.log(vnode, "vnode")

              // console.log(binding.value, "binding.value")
              // el.value = el.value.replace(/\s/g,'').replace(/[^\d]/g,'').replace(/(\d{4})(?=\d)/g,'$1 ')

              // binding.value.str = el.value

              // 1. 获取ctx

              // 2. 执行验证

            }
            el.addEventListener('input', el.handler)
          },
          unbind: function (el) {
            el.addEventListener('input', el.handler)
          }
        }
      }

    })
  </script>
</body>

</html>